<template>
    <div class="tableList">
        <el-table :data="tableData" style="width: 100%;" max-height="250"
            :header-cell-style="{color:'#000',fontWeight:400,fontSize:'12px'}"
            :cell-style="{color:'#5a5a5a',fontSize:'12px',fontWeight:400}" v-loading="loading"
            element-loading-text="加载中" element-loading-background="rgba(250, 250, 250, 0.5)"
            element-loading-spinner="el-icon-loading" ref="tabList">
            <el-table-column label="序号" width="80">
                <template slot-scope="scope">
                    <span>{{(searchForm.page - 1) * (searchForm.limit) + scope.$index + 1}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="typeName" label="联络灯类型" width="250">
            </el-table-column>
            <el-table-column label="时长">
                <template slot-scope="scope">
                    {{scope.row.durationHour}}h
                </template>
            </el-table-column>
            <el-table-column align="right">
                <template slot="header">
                    <my-button type="text" size="mini" icon="el-icon-upload2" @btnClick="handleExportLampGroupType()">导出
                    </my-button>
                </template>
            </el-table-column>
            <div slot="empty">
                <el-empty :image-size="100"></el-empty>
            </div>
        </el-table>
        <div class="pagination">
            <div class="proportion">
                <div class="proportion_item" v-for="(i,index) in deviceStatusRateList" :key="index">
                    <span>{{i.statusName}}</span>
                    <span style="margin:0 3px">{{i.durationHour}}h</span>
                    <span>({{i.rate}}%)</span>
                </div>
            </div>
            <el-pagination v-if="total" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :page-sizes="[10,20,50,100]" :page-size="searchForm.limit" layout="total,prev, pager, next,sizes"
                :total="total" background>
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import {
        lampTiming,
        exportLampGroupType
    } from '@/api/lampController'
    import fileDownload from "js-file-download";
    export default {
        data() {
            return {
                tableData: [],
                loading: false,
                total: 0,
                deviceStatusRateList:[]
            }
        },
        props: {
            searchForm: {
                type: Object,
                default: () => ({})
            }
        },
        methods: {
            handleExportLampGroupType() {
                exportLampGroupType(this.searchForm).then(res => {
                    fileDownload(res, '联络灯时序类型表' + new Date().dateFormat('yyyyMMddhhmmss') + '.xlsx', 
                    'application/vnd.ms-excel;charset=UTF-8')
                })
            },
            getLampTiming(data) {
                this.loading = true
                lampTiming(data).then(res => {
                    if (res.code == 200) {
                        this.tableData = res.data.lampTypeGroupList
                        this.total = res.count
                        this.deviceStatusRateList = res.data.deviceStatusRateList
                        this.$emit('getChart',res.data.deviceStatusList,res.data.lampTimingStatisticsList)
                    }
                    this.loading = false
                })
            },
            //pageSize 改变时会触发
            handleSizeChange(val) {
                this.searchForm.limit = val
                this.getLampTiming(this.searchForm)
            },
            //currentPage 改变时会触发
            handleCurrentChange(val) {
                this.searchForm.page = val
                this.getLampTiming(this.searchForm)
            },
        },
    }
</script>

<style lang="less" scoped>
    .tableList {
        code {
            font-family: sans-serif;
        }
        .pagination {
            .proportion{
                margin-top: 14px;
                float: left;
                display: flex;
                .proportion_item{
                    margin-right: 12px;
                    font-size: 12px;
                }
            }
        }
    }
</style>